<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>智慧灯杆管理平台</title>
  <link href="template4/css/easyui.css" rel="stylesheet" type="text/css">
  <link href="template4/css/room.css" rel="stylesheet" type="text/css" />


  <script language="javascript" type="text/javascript" src="template4/js/jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="template4/js/jquery.easyui.min.js"></script>
  <script language="javascript" type="text/javascript" src="template4/js/echarts.min.js"></script>
  <script language="javascript" type="text/javascript" src="template4/js/echarts-wordcloud.js"></script>
  <script language="javascript" type="text/javascript" src="template4/js/echarts-liquidfill.min.js"></script>
  <script language="javascript" type="text/javascript" src="template4/js/china.js"></script>
  <script language="javascript" type="text/javascript" src="template4/js/geoCoord.js"></script>
  <script language="javascript" type="text/javascript" src="template4/js/room.js"></script>
  <script language="javascript" type="text/javascript" src="template4/js/resize.js"></script> 
  <script language="javascript" type="text/javascript" src="template4/js/mapStyle.js"></script> 
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=v3tzhpCd6GIWrAYLVCThSgOLYAhlRKsc"></script>
  <!-- 全局配置 -->
    <script>
      window._CONFIG = {};
      window._CONFIG['domianURL'] = 'http://192.168.43.216:8080/jeecg-boot';
    </script>
  <style type="text/css">
    .display-none {
      display: none;
    }
  </style>
</head>

<body>
<div id="main">
	<div id="big_tit">
		<img src="./template4/images/big-title.png" alt="">
	</div>
    <div id="mapDiv"></div>
    <div id="refresh">
        <span class="time" id="timeYear">2022</span>年
        <span class="time" id="timeMonth">5</span>月
        <span class="time" id="timeDay">6</span>日
        星期<span id="timeWeekday">二</span>
    </div>
    <!--设备总览 -->
    <div id="sbzl">
		<div class="horn1">
			<img src="./template4/images/icons/1-9.png" alt="">
		</div>
		<div class="horn2">
			<img src="./template4/images/icons/1-10.png" alt="">
		</div>
		<div class="horn3">
			<img src="./template4/images/icons/1-11.png" alt="">
		</div>
		<div class="horn4">
			<img src="./template4/images/icons/1-12.png" alt="">
		</div>
		<div class="title">
			<span>设备总览</span>
		</div>
        <div class="item zm">
			 <div class="box">
				 <div class="left">
				 				<img src="./template4/images/icons/1-1.png" alt="">
				 </div>
				 <div class="right">
					 <div class="numb" id="sbzl-zm">0</div>
					 <div style="font-size: 14px;color: #d4fcfc;">照明</div>
				 </div>
			 </div>
        </div>
        <div class="item jk">
            <!-- <div class="numb" id="sbzl-jk">0</div>
            <div class="title">监控</div> -->
			<div class="box">
				 <div class="left">
								<img src="./template4/images/icons/1-2.png" alt="">
				 </div>
				 <div class="right">
					 <div class="numb" id="sbzl-jk">0</div>
					 <div style="font-size: 14px;color: #d4fcfc;">监控</div>
				 </div>
			</div>
        </div>
        <div class="item cdz">
            <!-- <div class="numb" id="sbzl-cdz">0</div>
            <div class="title">充电桩</div> -->
			<div class="box">
				 <div class="left">
								<img src="./template4/images/icons/1-3.png" alt="">
				 </div>
				 <div class="right">
					 <div class="numb" id="sbzl-cdz">0</div>
					 <div style="font-size: 14px;color: #d4fcfc;">充电桩</div>
				 </div>
			</div>
        </div>
        <div style="margin-top: 31px;">
            <div class="item wifi">
               <!-- <div class="numb" id="sbzl-wifi">0</div>
                <div class="title">wifi-AP</div> -->
				<div class="box">
					 <div class="left">
									<img src="./template4/images/icons/1-4.png" alt="">
					 </div>
					 <div class="right">
						 <div class="numb" id="sbzl-wifi">0</div>
						 <div style="font-size: 14px;color: #d4fcfc;">wifi-AP</div>
					 </div>
				</div>
            </div>
            <div class="item xxp">
                <!-- <div class="numb" id="sbzl-xxpm">0</div>
                <div class="title">信息屏幕</div> -->
				<div class="box">
					 <div class="left">
									<img src="./template4/images/icons/1-5.png" alt="">
					 </div>
					 <div class="right">
						 <div class="numb" id="sbzl-xxpm">0</div>
						 <div style="font-size: 14px;color: #d4fcfc;">信息屏幕</div>
					 </div>
				</div>
            </div>
            <div class="item yjjg">
                <!-- <div class="numb" id="sbzl-yjjg">0</div>
                <div class="title">一键告警</div> -->
				<div class="box">
					 <div class="left">
									<img src="./template4/images/icons/1-6.png" alt="">
					 </div>
					 <div class="right">
						 <div class="numb" id="sbzl-yjjg">0</div>
						 <div style="font-size: 14px;color: #d4fcfc;">一键告警</div>
					 </div>
				</div>
            </div>
        </div>
        <div style="margin-top: 18px;">
            <div class="item gb">
               <!-- <div class="numb" id="sbzl-gb">0</div>
                <div class="title">广播</div> -->
				<div class="box">
					 <div class="left">
									<img src="./template4/images/icons/1-7.png" alt="">
					 </div>
					 <div class="right">
						 <div class="numb" id="sbzl-gb">0</div>
						 <div style="font-size: 14px;color: #d4fcfc;">广播</div>
					 </div>
				</div>
            </div>
            <div class="item cgq">
               <!-- <div class="numb" id="sbzl-cgq">0</div>
                <div class="title">传感器</div> -->
				<div class="box">
					 <div class="left">
									<img src="./template4/images/icons/1-8.png" alt="">
					 </div>
					 <div class="right">
						 <div class="numb" id="sbzl-cgq">0</div>
						 <div style="font-size: 14px;color: #d4fcfc;">传感器</div>
					 </div>
				</div>
            </div>
        </div>
    </div>
    <!-- 智慧照明 -->
    <div id="zhzm">
		<div class="horn1">
			<img src="./template4/images/icons/1-9.png" alt="">
		</div>
		<div class="horn2">
			<img src="./template4/images/icons/1-10.png" alt="">
		</div>
		<div class="horn3">
			<img src="./template4/images/icons/1-11.png" alt="">
		</div>
		<div class="horn4">
			<img src="./template4/images/icons/1-12.png" alt="">
		</div>
		<div class="title">
			<span>智慧照明</span>
		</div>
        <div id="y_gauge1"></div>
        <div id="y_gauge2"></div>
        <div id="y_gauge3"></div>
		<div class="progress">
			<div class="item">
				<div class="circle"></div>
				<div class="count">
					0
				</div>
				<div class="name">
					总安装
				</div>
			</div>
			<div class="item2">
				<div class="circle"></div>
				<div class="count">
					0
				</div>
				<div class="name">
					在线
				</div>
			</div>
			<div class="item3">
				<div class="circle"></div>
				<div class="count">
					0
				</div>
				<div class="name">
					亮灯
				</div>
			</div>
			<div class="item4" style="left: ;">
				<div class="circle active"></div>
				<div class="count activeNum">
					0
				</div>
				<div class="name">
					故障
				</div>
			</div>
		</div>
    </div>
    <!-- 智慧充电 -->
    <div id="zhcd">
		<div class="horn1">
			<img src="./template4/images/icons/1-9.png" alt="">
		</div>
		<div class="horn2">
			<img src="./template4/images/icons/1-10.png" alt="">
		</div>
		<div class="horn3">
			<img src="./template4/images/icons/1-11.png" alt="">
		</div>
		<div class="horn4">
			<img src="./template4/images/icons/1-12.png" alt="">
		</div>
		<div class="title">
			<span>智慧充电</span>
		</div>
		<div>
			<div id="cd_num"></div>
			<span class="tit">累计充电量</span>
		</div>
		<div>
			<div id="cd_money"></div>
			<span class="tit2">累计金额</span>
		</div>
    </div>
    <!-- 公共wifi -->
    <div id="ggwf">
		<div class="horn1">
			<img src="./template4/images/icons/1-9.png" alt="">
		</div>
		<div class="horn2">
			<img src="./template4/images/icons/1-10.png" alt="">
		</div>
		<div class="horn3">
			<img src="./template4/images/icons/1-11.png" alt="">
		</div>
		<div class="horn4">
			<img src="./template4/images/icons/1-12.png" alt="">
		</div>
		<div class="title">
			<span>公共wifi</span>
		</div>
        <div id="ggwfChart" style="width: 100%; height: 200px;margin-top:40px;"></div>
    </div>
    <!-- 环境气象 -->
    <div id="hjqx">
		<div class="horn1">
			<img src="./template4/images/icons/1-9.png" alt="">
		</div>
		<div class="horn2">
			<img src="./template4/images/icons/1-10.png" alt="">
		</div>
		<div class="horn3">
			<img src="./template4/images/icons/1-11.png" alt="">
		</div>
		<div class="horn4">
			<img src="./template4/images/icons/1-12.png" alt="">
		</div>
		<div class="title">
			<span>环境气象</span>
		</div>
        <div style="height: 130px;width: 420px;margin: 50px 0 0 10px;; padding: 20px 0 0 10px;">
            <div style="display: inline-block;font-size: 52px;color: #fff;">26℃</div>
            <div style="display: inline-block;width:140px;font-size: 30px;color: #fff;margin-left: 25px;">洛阳市<br>晴转多云</div>
            <div style="display: inline-block;margin-left: 25px"><img id="weatherImg"
                                                                      src="template4/images/weather/weather_img01.png" alt=""></div>
        </div>
    </div>
    <!-- 智能监控 -->
    <div id="znjk">
		<div class="horn1">
			<img src="./template4/images/icons/1-9.png" alt="">
		</div>
		<div class="horn2">
			<img src="./template4/images/icons/1-10.png" alt="">
		</div>
		<div class="horn3">
			<img src="./template4/images/icons/1-11.png" alt="">
		</div>
		<div class="horn4">
			<img src="./template4/images/icons/1-12.png" alt="">
		</div>
		<div class="title">
			<span>智能监控</span>
		</div>
        <div style="height: 160px;width: 420px;margin: 60px 0 0 16px;">
            <div style="width: 295px;height: 160px;float:left;">
				<!-- <div style="width: 219px;height: 122px;"> -->
					<img src="./template4/images/jiankong.png" alt="" style="width: 100%;">
				<!-- </div> -->
            </div>
            <div style="width: 125px;height: 160px;float: right;text-align: center;">
                <div style="height: 50%;line-height: 79px;font-size: 18px;color: #fff;border:1px solid #144675;">人流量：<span
                            style="color:#04bbef ;">415</span></div>
                <div style="height: 50%;line-height: 79px;font-size: 18px;color: #fff;border:1px solid #144675;border-top: none;">车流量：<span
                            style="color:#04bbef ;">36</span></div>
            </div>
        </div>

    </div>
    <!-- 信息 -->
    <div id="xx">
		<div class="horn1">
			<img src="./template4/images/icons/1-9.png" alt="">
		</div>
		<div class="horn2">
			<img src="./template4/images/icons/1-10.png" alt="">
		</div>
		<div class="horn3">
			<img src="./template4/images/icons/1-11.png" alt="">
		</div>
		<div class="horn4">
			<img src="./template4/images/icons/1-12.png" alt="">
		</div>
		<div class="title">
			<span>信息</span>
		</div>
		<div style="width: 412px;height: 190px;margin: 50px auto 0; ">
			<img src="./template4/images/xinxi.png" alt="" style="width: 100%;">
		</div>
    </div>
    <!--报警与广播 -->
    <div id="bjygb">
		<div class="horn1">
			<img src="./template4/images/icons/1-9.png" alt="">
		</div>
		<div class="horn2">
			<img src="./template4/images/icons/1-10.png" alt="">
		</div>
		<div class="horn3">
			<img src="./template4/images/icons/1-11.png" alt="">
		</div>
		<div class="horn4">
			<img src="./template4/images/icons/1-12.png" alt="">
		</div>
		<div class="title">
			<span>报警与广播</span>
		</div>
        <div style="height: 42px;line-height: 42px;margin: 58px 22px 0 20px; border:1px solid #069;display: flex;align-items: center;padding-left: 10px;">
			<img src="./template4/images/laba.png" alt="" style="width: 30px;">
			<!-- <div class="marquee_list" style="font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #5AC5F6;margin-left: 4px;">广播：告别PC增长依赖，联想集团Q1迎来第二增长曲线</div> -->
		 <!-- 公告循环展示 -->
		 <div id="J-scroll" class="notice">
		     <ul class="marquee_list">
		     </ul>
		 </div>
		</div>
        <div style="margin:0 20px;background: #051958;margin-top: 4px; display: block;">
            <table class="table_2" width="100%" cellpadding="6" cellspacing="0">

                <tr class="row1">
                    <td>数据0</td>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                    <td>数据5</td>
                </tr>
                <tr class="row2">
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                </tr>
                <tr class="row2">
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                </tr>
                <tr class="row1">
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                </tr>
            </table>
        </div>
    </div>
    <!-- 综合告警 -->
    <div id="zhgj">
		<div class="horn1">
			<img src="./template4/images/icons/1-9.png" alt="">
		</div>
		<div class="horn2">
			<img src="./template4/images/icons/1-10.png" alt="">
		</div>
		<div class="horn3">
			<img src="./template4/images/icons/1-11.png" alt="">
		</div>
		<div class="horn4">
			<img src="./template4/images/icons/1-12.png" alt="">
		</div>
		<div class="title">
			<span>综合告警</span>
		</div>
        <div style="margin: 55px 50px;border: 1px solid #069;background:#071753;">
            <table class="table_1" width="100%" cellpadding="6" cellspacing="0">

                <tr class="row1">
                    <td>数据0</td>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                    <td>数据5</td>
                </tr>
                <tr class="row2">
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                </tr>
                <tr class="row2">
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                </tr>
                <tr class="row2">
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                </tr>
                <tr class="row2">
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                </tr>
                <tr class="row1">
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                    <td>*****</td>
                </tr>
            </table>
        </div>

    </div>
    <!--智慧云盒 -->
    <div id="zhyh">
		<div class="horn1">
			<img src="./template4/images/icons/1-9.png" alt="">
		</div>
		<div class="horn2">
			<img src="./template4/images/icons/1-10.png" alt="">
		</div>
		<div class="horn3">
			<img src="./template4/images/icons/1-11.png" alt="">
		</div>
		<div class="horn4">
			<img src="./template4/images/icons/1-12.png" alt="">
		</div>
		<div class="title">
			<span>智慧云盒</span>
		</div>
		<div style="width: 380px;margin: 57px auto 0;background-color: #051958;">
			<table class="table_2" width="100%" cellpadding="6" cellspacing="0">
				<tr>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
				</tr>
				<tr>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-13.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-13.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
				</tr>
				<tr>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-13.png" alt="">
					</td>
					<td>
						<img src="./template4/images/icons/1-14.png" alt="">
					</td>
				</tr>
			</table>
		</div>
		<div class="total">
			<div>
				<span>连接数：</span>
				<span class="num">111</span>
			</div>
			<div>
				<span>总流量：</span>
				<span class="num">111</span>
			</div>
		</div>
    </div>


</div>


</body>

</html>